import { CheckOutlined, SwapRightOutlined, WarningTwoTone } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Badge, Button, Card, Empty, message, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface CheckTextResultsProps {
  loading: boolean;
  clickId: string | undefined;
  checks: mainReviewData.NrshTextCheckResult[];
}

const CheckTextResults: React.FC<CheckTextResultsProps> = ({
  loading,
  clickId,
  checks,
}) => {
  const [valueErrorWords, setValueErrorWords] = useState<number>();
  useEffect(() => {
    if (checks && checks.length > 0) {
      const error = checks.filter((item) => {
        return item.repair == 0 && item.ignore == 0;
      });
      setValueErrorWords(error.length);
    }
  }, [checks]);
  return (
    <Spin spinning={loading}>
      <Card
        title={
          <>
            <WarningTwoTone twoToneColor="red" /> 检测到疑似错误 {valueErrorWords} 处
          </>
        }
      >
      <div
        style={{
          height: 615,
          overflowX: 'hidden',
          overflowY: 'scroll',
          marginTop: 10,
          scrollbarWidth: 'none',
          paddingLeft:10,
          paddingRight:10
        }}
      >
        {checks && checks.length > 0 ? (
          checks.map((item, index) => {
            let ribbonColor = 'orange';
            if (item.repair == 1) {
              ribbonColor = '#0DBC79';
            } else {
              if (item.ignore == 1) {
                ribbonColor = 'blue';
              } else {
                if (item.ignore == 1) {
                  ribbonColor = 'blue';
                } else {
                  const belongId = item.type.belongId;

                  switch (belongId) {
                    case '9':
                    case '31':
                    case '32':
                    case '35':
                    case '34':
                    case '39':
                    case '36':
                    case '20':
                    case '21':
                    case '24':
                    case '23':
                      ribbonColor = '#FFC300';
                      break;
                    case '119':
                    case '101':
                    case '123':
                    case '19':
                    case '124':
                    case '8':
                    case '122':
                    case '240':
                    case '6':
                      ribbonColor = '#FF5733';
                      break;
                    case '105':
                    case '109':
                    case '112':
                    case '111':
                    case '108':
                    case '118':
                      ribbonColor = '#C70039';
                      break;
                  }
                }
              }
            }

            return (
              <a
                key={item.id}
                id={`check${item.id}`}
                href={`#words${item.id}`}
                style={{ textDecoration: 'none', color: 'while', cursor: 'default' }}
              >
                <ProCard
                  hoverable
                  style={{
                    backgroundColor: item.click === 1 ? '#D9EBFB' : '',
                    color: 'black',
                    marginTop: 10,
                    marginBottom: 10,
                    cursor: 'default',
                  }}
                  onClick={() => {

                  }}
                >
                  <Badge.Ribbon
                    text={index + 1}
                    placement="start"
                    style={{
                      marginTop: '-10px',
                    }}
                    color={ribbonColor}
                  >
                    <div
                      style={{
                        marginLeft: '25px',
                      }}
                    >
                      <span
                        style={{
                          fontFamily: '宋体',
                          fontWeight: 'bold',
                          fontSize: 14,
                        }}
                      >
                        {item.word}
                      </span>
                      {item.suggest != undefined && item.suggest.length > 0 && (
                        <SwapRightOutlined
                          style={{
                            color: '#E43C30',
                          }}
                        />
                      )}
                      {item.suggest != undefined && item.suggest.length > 0 && item.suggest[0] && (
                        <span
                          style={{
                            fontFamily: '宋体',
                            fontWeight: 'bold',
                            fontSize: 14,
                          }}
                        >
                          {item.suggest[0]}
                        </span>
                      )}
                    </div>
                  </Badge.Ribbon>
                  <div
                    style={{
                      flex: 1,
                      marginTop: 16,
                      justifyContent: 'space-between',
                      display: 'flex',
                    }}
                  >
                    <div
                      style={{
                        display: 'inline',
                      }}
                    >
                      <div
                        style={{
                          color: '#f50',
                        }}
                      >
                        错误原因：{item.type.name}
                      </div>
                      {item.explanation && <div>错误提示：{item.explanation}</div>}
                    </div>

                  </div>
                </ProCard>
              </a>
            );
          })
        ) : (
          <Empty
            style={{ marginTop: '24px' }}
            image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            description={<a>暂无数据</a>}
          />
        )}
      </div>
      </Card>
    </Spin>
  );
};

export default CheckTextResults;
